<template>
  <div class="zn-wrapper">
    <div class="zn-search">
      <!--<el-select v-model="search.payType" size="small" placeholder="支付方式" clearable>-->
        <!--<el-option label="餐厅名" value="1"></el-option>-->
        <!--<el-option label="订单号" value="2"></el-option>-->
        <!--<el-option label="用户电话" value="3"></el-option>-->
      <!--</el-select>-->
      <el-select v-model="search.timeType" size="small" placeholder="时间类型" clearable>
        <el-option
          v-for="item in timeType"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        value-format="yyyy-MM-dd HH:mm:ss"
        size="small"
        v-model="search.dateTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-select size="small" v-model="search.keyWordsType" placeholder="关键词类型" clearable>
        <el-option
          v-for="item in keyWordsType"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input clearable size="small" class="keyWords" v-model="search.keyWords" placeholder="请输入关键词"></el-input>
      <el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit"></el-button>
    </div>
    <div class="zn-table">
      <div class="zn-table-header">
        <ul>
          <li>商品</li>
          <li>买家</li>
          <li>支付/配送</li>
          <li>价格</li>
          <li>操作</li>
          <li>状态</li>
        </ul>
      </div>
      <div class="zn-table-main">
        <div class="tables" v-for="list in tableData">
          <div class="table-top">
            <div class="orderInfo">
              <span class="time">
                <i>商城</i>
                {{list.createTime}}
              </span>
              <span class="orderNum">
                订单编号:{{list.orderNo}}
              </span>
            </div>
            <div class="remark">
              <el-button type="text" icon="el-icon-chat-line-round" @click="remark(list)">备注</el-button>
              <el-button type="text" icon="el-icon-truck" @click="edit(list, 'edit')">修改物流</el-button>
            </div>
          </div>
          <div class="table-row">
            <ul>
              <li class="goodsInfo">
                <div class="goods" v-for="item in list.goodVoList">
                  <img :src="item.picture">
                  <div class="goodsDetail">
                    <div class="goodsTitle">
                      <span>{{item.goodsName}}</span>
                      <span>¥{{item.price}}</span>
                    </div>
                    <div class="goodsNorm">
                      <span>{{item.skuName}}</span>
                      <span>x{{item.goodsNum}}</span>
                    </div>
                  </div>
                </div>
              </li>
              <li class="userInfo">
                <div>
                  <!--<a href="#">15305166353</a><br/>-->
                  {{list.receiverName}} <br/>
                  {{list.receiverMobile}}
                </div>
              </li>
              <li class="payType">
                <div>
                  <span>
                    <svg-icon icon-class="financial_fill" />
                    余额支付
                  </span><br />
                  <span>快递</span>
                </div>
              </li>
              <li class="price">
                <div>
                  <span>¥{{list.goodsAmount}}</span><br />
                  <span>(含运费：¥{{list.freight}})</span>
                </div>
              </li>
              <li class="operate">
                <div>
                  <el-button type="text" @click="detail(list.id)">查看详情</el-button>
                  <br />
                  <!--<el-button type="text" @click="log">物流信息</el-button>-->
                </div>
              </li>
              <li class="status">
                <div>
                  <span>{{list.status | orderStatus}}</span>
                  <!--<el-button size="mini" type="primary">部分发货</el-button>-->
                  <br /><br />
                  <el-button size="mini" type="primary" @click="edit(list, 'confirm')" v-if="list.status == 1">确认发货</el-button>
                  <br />
                  <el-button type="text" v-if="list.status == 2">取消发货</el-button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="zn-table-foot clearfix">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="page.pageSize" layout="total, prev, pager, next" :total="page.total">
      </el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :width="'720px'" :visible.sync="visible">
      <div :is="comp" @close="closeDialog" :orderDetail="orderInfo" :type="type"></div>
    </el-dialog>
  </div>
</template>

<script>
  import api from "@/api/order.service.js";
  import shipInfo from './component/shipInfo.vue'
  import remark from './component/remark.vue'
  import log from './component/log.vue'

  export default {
    data() {
      return {
        visible: false,
        comp: 'receiverInfo',
        dialogTitle: '',
        keyWordsType: [{
          value: 'orderNo',
          label: '订单号'
        }, {
          value: 'receiverAddress',
          label: '地址'
        }, {
          value: 'receiverMobile',
          label: '收货人电话'
        }, {
          value: 'receiverName',
          label: '收货人姓名'
        }, {
          value: 'storeName',
          label: '店铺名称'
        }],
        timeType: [{
          value: 'createTime',
          label: '下单时间'
        }, {
          value: 'payTime',
          label: '付款时间'
        }, {
          value: 'shipTime',
          label: '发货时间'
        }],
        search: {
        },
        page: {
          pageNo: 1,
          pageSize: 10,
          total: null
        },
        currentPage: 1,
        tableData: [],
        orderInfo: {},
        type: null
      };
    },
    components: {
      log,
      remark,
      shipInfo
    },
    computed: {
      btn() {
        return JSON.parse(localStorage.getItem('btn'))[this.$route.name] || []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      onSubmit() {
        let params = {}
        params[this.search['keyWordsType']] = this.search['keyWords']
        if (this.search['dataTime']) {
          params[`${this.search['timeType']}Start`] = this.search['dateTime'][0]
          params[`${this.search['timeType']}End`] = this.search['dateTime'][1]
        }
        this.getList(params)
      },
      getList(search) {
        // 调接口拿数据
        search ? search : search = {}
        search.pageNo = this.page.pageNo
        search.pageSize = this.page.pageSize
        api.list(search).then(res => {
          this.tableData = res.values
          this.page.total = res.total
        })
      },
      handleCurrentChange(pageNo) {
        this.page.pageNo = pageNo
        this.getList()
      },
      edit(obj, type) {
        if (type === 'edit') {
          this.dialogTitle = '修改物流信息'
          this.type = 'edit'
        } else {
          this.dialogTitle = '订单发货'
          this.type = 'confirm'
        }
        this.orderInfo = obj
        this.comp = shipInfo
        this.visible = true
      },
      remark(list) {
        this.dialogTitle = '备注'
        this.comp = remark
        this.orderInfo = list
        this.visible = true
      },
      log() {
        this.dialogTitle = '查看物流'
        this.comp = 'log'
        this.visible = true
      },
      closeDialog(flag) {
        this.visible = false
        flag ? this.getList() : ''
      },
      detail(orderId) {
        this.$router.push({name: 'orderDetail', query: {orderId}})
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .zn-wrapper {
    color: #333;
  }
  .zn-search {
    margin-bottom:20px;
    display: grid;
    grid-template-columns: 100px 400px 120px auto 44px;

  }

  .zn-table-header {
    ul {
      background-color: #f8f8f8;
      list-style: none;
      display: grid;
      grid-template-columns: 400px repeat(5, auto);
      grid-template-rows: 35px;
      align-items: center;
      padding: 0 20px!important;
      li {
        text-align: center;
        &:first-of-type {
          text-align: left;
        }
      }
    }
  }

  .zn-table-main {
    .tables {
      border: 1px solid #e5e5e5;
      margin-top:20px;
      .table-top {
        padding: 0 20px;
        background-color: #f7f7f7;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 47px;
        align-items: center;
      }
      .orderInfo {
        color: #8f8e8e;

      }
      .time {
        font-weight: bold;
        margin-right: 10px;
        color: #2d2d31;
        i {
          display: inline-block;
          width: 48px;
          height: 18px;
          border: 1px solid #1b86ff;
          color: #1b86ff;
          text-align: center;
          margin-right: 10px;
          font-style: normal;
        }
      }

      .remark {
        text-align: right;
      }

      .table-row {
        margin: 0 20px;
        ul {
          display: grid;
          padding: 0;
          margin: 0;
          grid-template-columns: 400px repeat(5, auto);
          align-items: center;
          li {
            text-align: center;
            border-left: 1px solid #efefef;
            height: 100%;
            align-items: center;
            justify-content: center;
            padding: 20px 0;
            &:first-of-type {
              border: none;
              justify-content: start;
              padding-right:10px;
            }
          }
          .userInfo,.payType,.price,.operate,.status {
            display: grid;
          }
        }
        .goodsInfo {
          .goods {
            display: grid;
            margin-top: 10px;
            grid-template-columns: 70px auto;
          }
          img {
            width: 70px;
            height: 70px;
            border: 1px solid #efefef;
            padding: 1px;
          }
          .goodsDetail {
            margin-left: 10px;
            display: grid;
            grid-template-rows: 20px 20px;
            align-content: center;
            .goodsTitle,.goodsNorm {
              display: grid;
              grid-template-columns: 180px auto;
              justify-content: space-between;
              span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:first-of-type {
                  text-align: left;
                }
              }
            }
            .goodsNorm {
              span:first-of-type {
                color: #999;
              }
            }
          }
        }
        .userInfo {
        }
        .payType {
          span {
            margin-bottom:5px;
            svg {
              color: #ffc000;
            }
          }
        }
      }
    }
  }
</style>

